<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>title</title>
    <script src="bower_components/react/react.js"></script>
    <script src="js/jquery-1.12.3.js"></script>
    <script src="bower_components/react/react-dom.min.js"></script>
    <script src="bower_components/react/browser.min.js"></script>
    <link rel="stylesheet" href="css/bassic.css" />
    <link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
</head>

<body>
    <div class="App">
        <div class="login-content">
            <div class="login-header">
                <span class="login_l"><i class="iconfont left">&#xe614;</i></span>
                <span class="login_h">登录</span>
                <span class="login_d"><span class="pwd-login">密码登录</span></span>
            </div>

            <div class="login-main">
                <form class="myform" enctype="multipart/form-data" method="post">
                    <input placeholder="手机号" class="phone" name="phone" /><button type="button" class="verification">获取验证码</button><br/>
                    <input placeholder="验证码" class="password" name="password" />
                </form>
                <p class="icl">
                    温馨提示：未注册饿了么帐号的手机号，登录时将自动注册，且代表您已同意<a>《用户服务协议》</a>
                </p>
            </div>

            <input type="button" value="登录" id="msgbtn" />
            <p class="about">关于我们</p>
        </div>

        <div class="toast">

        </div>
    </div>









    <script type="text/javascript">
        $(function () {

            var falg1 = false;
            var falg2 = false;

            $('.left').click(function () {
                window.location.href = "usercenter.html";
            })

            $('.pwd-login').click(function () {
                window.location.href = "pwdlogin.html";
            })


            $('.phone').keyup(function() {
                console.log($(this).val());
                 var reg = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
                if (reg.test($(this).val())) {
                    $('.verification').attr('disabled',false).css('background','#2395ff');
                    falg1 = true;
                }else{
                    $('.verification').attr('disabled',true).css('background','#ccc');
                    falg1 = false;
                }
            })

            $('.verification').click(function () {
                if ($('.phone').val()) {
                    
                var time = 30;
                var that = this;
                var timer = setInterval(function () {
                    time--;

                    $(that).html('已发送' + '(' + time + "s" + ')');
                    $(that).attr('disabled',true).css('background','#ccc');

                    if (time == 0) {
                        clearInterval(timer);
                        $(that).html('重新获取').css('background', '#2395ff');
                    }
                }, 1000);
                }

            })


            /*点击登录按钮*/
            $('#msgbtn').click(function () {

                var reg = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
                if ($('.phone').val() == "") {
                    $('.toast').fadeIn(1000).html("请填写手机号").fadeOut(1000);
                    falg2 = false;
                }

                else if (!reg.test($('.phone').val())) {
                    $('.toast').fadeIn(1000).html("请填写合法手机号").fadeOut(1000);
                    falg2 = false;
                }

                else if ($(".password").val() == "") {
                    $('.toast').fadeIn(1000).html("验证码不能为空").fadeOut(1000);
                    falg2 = false;
                }

                if (falg1 &&　falg2) {
                    $('.verification').attr('disabled',false)
                    alert('登录成功');
                } else {
                    alert('登录失败');
                }

            })

        })
    </script>

</body>

</html>